<template>
    <!-- 轮播图 -->
    <div
        v-if="imgList"
        class="banner"
        :style="'background: url(' + bannerBackList[backgroundIndex] + ')'"
        @mouseover="clearTimeFun"
        @mouseout="interval"
    >
        <div class="content">
            <div class="leftBtn" @click="computedIndex()">
                <img src="../../../assets/img/left.png" />
            </div>

            <div class="rightBtn" @click="computedIndex(-1)">
                <img src="../../../assets/img/right.png" />
            </div>

            <div class="left">
                <div class="wrap">
                    <img
                        v-for="(item, index) of imgList"
                        :src="item.imageUrl"
                        v-show="index === backgroundIndex"
                    />
                </div>
            </div>

        </div>
    </div>
</template>

<script setup>
    import { getCurrentInstance, ref } from 'vue';
    const axios = getCurrentInstance().proxy.$http;
    // 轮播图
    const imgList = ref();
    const bannerBackList = ref([]);
    let backgroundIndex = ref(0);
    let timeId = null;
    (async () => {
        const res = await axios.get('/banner?type=0');
        imgList.value = res.data.banners;
        imgList.value.forEach(item => {
            bannerBackList.value.push(item.imageUrl + '?imageView&blur=40x20')
        })
        interval();
    })()
    const computedIndex = (value = 1) => {
        const len = imgList.value.length - 1;
        if (value === -1) {
            if (backgroundIndex.value <= 0) {
                backgroundIndex.value = len;
            } else {
                backgroundIndex.value += value;
            }
        } else {
            if (backgroundIndex.value >= len) {
                backgroundIndex.value = 0;
            } else {
                backgroundIndex.value += value;
            }

        }
    }
    const interval = () => {
        timeId = setInterval(() => {
            computedIndex();
        }, 7000)
    }
    const clearTimeFun = () => {
        clearInterval(timeId);
    }
</script>

<style lang='less' scoped>
    @keyframes op {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    .banner {
        height: 280px;
        animation: op 1s;
        background-size: 100% 100%;
        .content {
            width: 983px;
            height: 100%;
            margin: 0 auto;
            position: relative;
            .left {
                background-color: rgb(71, 71, 71);
                width: 100%;
                height: 100%;
                overflow: hidden;
                float: left;
                .wrap {
                    display: flex;
                    height: 100%;
                    img {
                        width: 100%;
                        height: 100%;
                        float: left;
                        opacity: 1;
                        animation: op 1s;
                    }
                }
            }


            .leftBtn,
            .rightBtn {
                width: 37px;
                height: 63px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                cursor: pointer;
                &:hover {
                    background: rgba(0, 0, 0, 0.2);
                }
                img {
                    width: 100%;
                }
            }

            .rightBtn {
                right: -50px;
            }
            .leftBtn {
                left: -50px;
            }
        }
    }
</style>